<template>
	<el-row class="container">
		<!--头部-->
		<el-col :span="24" class="topbar-wrap">
			<div class="topbar-account topbar-btn">
				<el-button type="text" class="el-icon-message" style="color:gray" @click="messageList">{{this.$store.state.msgCount}}消息</el-button>
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><img src="../assets/images/forest.png"> 你好，{{sysUserName}}  <i class="iconfont icon-down"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>
							<el-button type="text" @click="changePwd">修改密码</el-button>
						</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-col>
		<aside>
			<div class="topbar-title">
				<span>元通汽车金融管理</span>
			</div>
			<div class="el-menu-vertical-demo-content">
				<el-menu width="200px" default-active="/order" class="el-menu-vertical-demo" theme="dark" router>
					<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
						<el-menu-item v-if="item.leaf&&item.children&&item.children.length&&item.level==1" :index="item.children[0].path" :class="{'is-active':$store.state.side == item.name}" class="el-submenu__title" @click="$store.commit('sideChange' , item.name)">
							<i :class="item.iconCls"></i>
							<span slot="title">{{item.children[0].name}}</span>
						</el-menu-item>
						<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length&&item.level==2" :index="item.children[0].path" :class="{'is-active':$store.state.side == item.name}" class="el-submenu__title submenuLevelSecond" @click="$store.commit('sideChange' , item.name)">
							<span slot="title">{{item.children[0].name}}</span>
						</el-menu-item>
					</template>
				</el-menu>
			</div>
		</aside>
		<!--中间-->
		<el-col :span="24" class="main">
			<!--右侧内容区-->
			<section class="content-container">
				<!-- <div class="grid-content bg-purple-light"> -->
				<el-col :span="24" class="content-wrapper">
					<transition name="fade" mode="out-in">
					</transition>
				</el-col>
				<!-- </div> -->
				<router-view class="router-view"></router-view>
			</section>
		</el-col>
		<el-dialog title="修改密码" :visible.sync="changePwdVisiable">
       <el-form :model="form" label-width="80px" :label-position="labelPosition">
         <el-form-item label="原密码" prop="pass">
           <el-input v-model="form.oldPwd" auto-complete="off" type="password"></el-input>
         </el-form-item>
         <el-form-item label="新密码"  prop="pass">
           <el-input v-model="form.newPwd" auto-complete="off" type="password"></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="pass">
           <el-input v-model="form.confirmPwd" auto-complete="off" type="password"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="changePwdVisiable = false">取 消</el-button>
         <el-button type="primary" @click="submitPwd">确 定</el-button>
       </div>
   </el-dialog>
	</el-row>
</template>
<script>
export default {
	name: 'home',
	data() {
		return {
			labelPosition:'left',
		    form:{oldPwd:'',newPwd:'',confirmPwd:''},
		    changePwdVisiable:false,
			websocket: new WebSocket("ws://" + window.location.host + "/message"),
			msgCount: 0,
			sysUserName: '',
			sysUserAvatar: '',
		}
	},
	methods: {
		menuManage() {
			var menuList = []
			$.each(this.$route.query.funcList, function(funcIndex, func) {
				if (func.isMenu == '1') {
					menuList.push(func)
				}
			})
			$.each(menuList, function(menuIndex, menu) {
				$.each(this.$router.options.routes, function(routeIndex, route) {
					$.each(route.children, function(childIndex, child) {
						if (menu.funcDesc != child.path) {
							route.menuShow = false
						}
					})
				})
			})

		},
		handleOpen() {
			//console.log('handleopen');
		},
		handleClose() {
			//console.log('handleclose');
		},

		messageList() {
			this.$router.push({ path: '/messagelist' })
		},

		//查询未读消息数量
		getUnreadCount() {
			this.$http.get("/messages/count")
				.then((respnse) => {
					console.log(respnse)
					this.msgCount = respnse.data.data
				})
				.catch(function(error) {
					console.log(error)
				})
		},
		socket() {
			let that = this
			//var websocket = new WebSocket("ws://"+ window.location.host+"/message")
			// var websocket = new WebSocket("ws://localhost:8080/websocket")
			this.websocket.onerror = function() {
				console.log("error")
			}

			//连接成功建立的回调方法
			this.websocket.onopen = function(event) {
				console.log("open")
			}

			//接收到消息的回调方法
			this.websocket.onmessage = function() {
				this.$store.commit('getUnreadCount',this);
				var data = eval("(" + event.data + ")")
				if (data.priority == 1) {
					that.notify_2(data.messageTitle, data.messageContent)
				} else {
					that.notify_1(data.messageTitle, data.messageContent)
				}
			}

			//连接关闭的回调方法
			this.websocket.onclose = function() {
				console.log("close")
			}
			window.onbeforeunload = function() {
				that.websocket.close();
			}
		},
		//可关闭
		notify_1(title, content) {
			const h = this.$createElement
			this.$notify({
				title: title,
				message: h('i', { style: 'color: teal' }, content)
			});
		},
		//不可关闭
		notify_2(title, content) {
			this.$notify({
				title: title,
				message: content,
				duration: 0
			});
		},

		logout() {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				sessionStorage.removeItem('access-user');
				sessionStorage.removeItem('token');
				sessionStorage.removeItem('power');
				sessionStorage.removeItem('side');
				sessionStorage.removeItem('menuList');
				this.$store.state.token = '';
				this.$store.state.power = '';
				_this.websocket.close();
				$.each(_this.$router.options.routes, function(index, value) {
					value.menuShow = false;
				})
				_this.$router.push('/login');
				this.$http.get('/logout');
			}).catch(() => {

			});
		},
		changePwd(){
		   this.changePwdVisiable=true
		  },
		  submitPwd(){
		   let that = this
		   var content = {}
		   content.newPassword=this.form.newPwd
		   content.oldPassword=this.form.oldPwd
		   if(this.form.newPwd!=this.form.confirmPwd){
		    this.$message("密码不一致")
		   }else{
		    this.$http.post('/users/editPassword',content)
		    .then((res)=>{
		     if(res.data.success){
		      this.$message("密码修改成功")
		      that.$router.push('/login');
		      this.$http.get('/logout');
		     }
		    })
		    .catch((error)=>{
		     console.log(error)
		    })
		   }
		  },
		menu() {
			let that = this
			var menuList = [];
			if (!sessionStorage.getItem("menuList")) return;
			menuList = sessionStorage.getItem("menuList").split(",")
			$.each(menuList, function(index, menu) {
				$.each(that.$router.options.routes, function(index, route) {
					$.each(route.children, function(index, child) {
						if(child.path=="/check"){
							if(that.$store.state.power=="ROLE_COOPERATIVE"){
								child.name="修改审核"
							}else{
								child.name="我的审核"
							}
						}
						if (menu == child.path) {
							route.menuShow = true
						}
					})
				})
			})
		}


	},
	mounted() {
		this.$store.commit('getUnreadCount',this);
		this.menuManage();
		this.socket();
		this.menu();
		this.getUnreadCount();
		this.sysUserName = sessionStorage.getItem('userName');
	}
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	.topbar-wrap {
		height: 50px;
		line-height: 50px;
		background: #FFF;
		padding: 0px;
		position: absolute;
		top: 0px;
		left: 200px;
		padding-right: 200px;
		.topbar-logo {
			float: left;
			text-align: center;
			width: 49px;
			border-right: 0px solid #000;
			line-height: 26px;
		}
		.topbar-account {
			float: right;
			padding-right: 12px;
		}
		.userinfo-inner {
			cursor: pointer;
			padding-left: 10px;
			img {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin: 5px 0px 5px 5px;
				float: left;
			}
		}
	}
	.main {
		position: absolute;
		top: 50px;
		left: 200px;
		bottom: 0px;
		right: 0px;
		padding-right: 200px;
		background: #F7F7F7;
		.content-container {
			position: relative;
			height: 100%;
			.router-view {
				height: 100%;
			}
		}
	}
	aside {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 200px;
		z-index: 0;
		background-color: #324157;
		.el-menu-vertical-demo-content {
			width: 200px;
			min-height: 300px; // height: 100%;
			position: absolute;
			top: 83px;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: auto;
			.el-menu-vertical-demo {
				// background-color: #1F2D3D;
				.submenuLevelSecond {
					background-color: #1F2D3D;
					text-align: center;
				}
			}
		}

		.menu-toggle {
			background: #324157;
			text-align: center;
			color: white;
			height: 26px;
			line-height: 30px;
			cursor: pointer;
		}
		.topbar-title {
			background: #324157;
			text-align: center;
			width: 100%;
			border-right: 0px solid #000;
			font-size: 16px;
			padding: 30px 0px;
			color: #fff;
		}
	}
}

</style>
